<template>
    <div>
        <div>
            <router-view/>
        </div>
        <div class="right"> 
            <div class="card"> 
                <div class="card_title"><i></i>{{value}}数据生产总量<i class="more_icon"></i></div>
                <div class="dbfg_top trgk">
                    <div>
                        <div>年度生产总量</div>
                        <div><span>5000</span>G</div>
                    </div>
                    <div>
                        <div>当月生产总量</div>
                        <div><span>300</span>G</div>
                    </div>
                </div>  
                <div id="left-trqk"></div>
            </div> 
            <div class="card2_r card">
                <div class="card_title"><i></i>{{value}}试验站监控概况<i class="more_icon"></i></div>  
                <div class="surveillance_box flex_a justify_between  bg_borderD">
                    <div v-for="(item, index) in surveillanceList" :key="index">
                        <img :src="item.img" alt="">
                        <p>{{ item.name }}</p>
                    </div>
                </div>
            </div> 

            <div class="card card3_r">
                <div class="card_title"><i></i>{{value}}试验站设备概览</div>
                <div class="card3_r_body">
                    <div id="echarts_3"></div>
                    <div class="flex_a">
                        <div id="echarts_4"></div>
                        <div id="echarts_5"></div>
                        <div id="echarts_6"></div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>  
export default { 
    data(){
        return{
            surveillanceList: [
                { img: require("../../static/img/1.png"), name: "东营农高区站" },
                { img: require("../../static/img/2.png"), name: "东营渤海农场" },
                { img: require("../../static/img/3.png"), name: "内蒙达拉特旗" },
                { img: require("../../static/img/4.png"), name: "内蒙巴彦淖尔" },
                { img: require("../../static/img/5.png"), name: "新疆石河子" },
                { img: require("../../static/img/6.png"), name: "吉林白城站" },
            ],
            value: "全国",
        }
    },
    mounted() {   
        this.value = this.$parent.value;  
        this.getPage(this.$parent.value);
        this.initpie2(); 
        this.initpie3("echarts_4",["正常", "25%"],"#00D6CE");
        this.initpie3("echarts_5",["告警", "25%"],"#FF7E40");
        this.initpie3("echarts_6",["离线", "25%"],"#FFFFFF");
        this.initBar();
        this.$bus.$on("change-select",(res)=>{
            this.changeSelect(res);
        });
        
    },
    methods: {
        changeSelect(val){
            this.value = val;   
            this.getPage(val);
        },

        getPage(val){
            if(val == '全国'){
                this.surveillanceList = [
                    { img: require("../../static/img/1.png"), name: "东营A" },
                    { img: require("../../static/img/2.png"), name: "东营B" },
                    { img: require("../../static/img/3.png"), name: "东营C" },
                    { img: require("../../static/img/4.png"), name: "白银D" },
                    { img: require("../../static/img/5.png"), name: "白银E" },
                    { img: require("../../static/img/6.png"), name: "白银F" },
                ];
                if(this.$route.path.includes("dataAnalysis")){
                    this.$router.push('/dataAnalysis/nationwide');
                }
            }else{
                if(this.$route.path.includes("dataAnalysis")){
                    this.$router.push('/dataAnalysis/region');
                }
                this.surveillanceList = this.surveillanceList.map((item, index) => {
                    const updatedName = `${val}${String.fromCharCode(65 + index)}`; 
                    return {
                        ...item, 
                        name: updatedName 
                    };
                });
            } 
        },
        changeMonitoringData(item){
            this.monitoringActive = item;
        },
        initpie2(){
            let _this = this;
            var chartDom = document.getElementById("echarts_3");
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize();  
            let img = "../../static/img/雷达图.png";  

            var trafficWay = [
                { name: '土壤监测', value: 640 },
                { name: '生物监测', value: 640 },
                { name: '气象监测', value: 817 },
                { name: '水分监测', value: 817 },
                // { name: '坝体渗透', value: 817 },
                // { name: '泄洪孔', value: 361 }
            ];
            let legendData1 = [];
            let legendData2 = [];

            var data = [];
            var color=['#FFBB58','#87BDFF','#81E844','#008EFF','#31DCC9','#FFF343']
            for (var i = 0; i < trafficWay.length; i++) {
                if(i<2){
                    legendData1.push(trafficWay[i].name);
                }else{ 
                    legendData2.push(trafficWay[i].name);
                }
                data.push({
                    value: trafficWay[i].value,
                    name: trafficWay[i].name,
                    itemStyle: {
                        normal: {
                            borderWidth: 3,
                            shadowBlur: 0,
                            borderRadius: 20,
                            borderColor:color[i],
                            shadowColor: color[i]
                        }
                    }
                }, {
                    value: 100,
                    name: '',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
            }
                });
            }
            var seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                radius: [64, 72], 
                center: ["22%", "50%"],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        }, 
                    }
                },
                data: data
            }];
            var option = { 
                color : color,
                title: {
                    text: '设备总数',
                    subtext: "900", 
                    textAlign: "center",
                    left: "20.5%",
                    top: "37%",
                    textStyle: {
                        color: '#CFDFFC',
                        fontSize: 16,
                    },
                    subtextStyle: {
                        color: '#2FE1FF',
                        fontSize: 22,
                        fontWeight: '600'
                    }
                },
                graphic: {
                    elements: [{
                        type: "image",
                        z: 3,
                        style: {
                            image: img,
                            width: 110,
                            height: 110
                        },
                        left: '6.6%',
                        top:  'center',
                        position: [100, 100]
                    }]
                },
                tooltip: {
                    show: false
                },
                legend:[
                    { 
                        orient: 'vertical',
                        top: "center",
                        right: "22%",
                        itemGap: 14,
                        itemWidth: 12,
                        itemHeight: 12,  
                        textStyle: {
                            color: "#fff",
                            fontSize: 14,
                            rich:{
                                a:{
                                    color: "#2FE1FF",
                                    fontSize: 14, 
                                    lineHeight: 30
                                }
                            }, 
                        }, 
                        data: legendData1,
                        formatter: function (params) {
                            var target; 
                            var value; 
                            for (var i = 0, l = data.length; i < l; i++) { 
                                if (data[i].name == params) {
                                    target = data[i].val;  
                                    value = data[i].value;   
                                }
                            } 
                            var arr = [params+'  ' + "\n" + '{a|' + value + '}' + ' '];
                            return arr.join("\n");
                            
                        }
                    },
                    { 
                        orient: 'vertical',
                        top: "center",
                        right: "-2%",
                        itemGap: 14,
                        itemWidth: 12,
                        itemHeight: 12,  
                        textStyle: {
                            color: "#fff",
                            fontSize: 14,
                            rich:{
                                a:{
                                    color: "#2FE1FF",
                                    fontSize: 14, 
                                    lineHeight: 30
                                }
                            }, 
                        }, 
                        data: legendData2,
                        formatter: function (params) {
                            var target; 
                            var value; 
                            for (var i = 0, l = data.length; i < l; i++) { 
                                if (data[i].name == params) {
                                    target = data[i].val;  
                                    value = data[i].value;   
                                }
                            } 
                            var arr = [params+'  ' + "\n" + '{a|' + value + '}' + ' '];
                            return arr.join("\n");
                            
                        }
                    },
                ],
                
                toolbox: {
                    show: false
                },
                series: seriesOption
            } 
            chart.setOption(option);
        },
        initpie3(id, text, color){
            let _this = this;
            var chartDom = document.getElementById(id);
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize();  
            var labelData = [];
            var labelData1 = [];
            for (var i = 0; i < 150; ++i) {
                labelData.push({
                    value: 1,
                    name: i,
                    itemStyle: {
                        normal: {
                            color: 'rgba(0,209,228,0)',
                        }
                    }
                });
            }
            for (var i = 0; i < labelData.length; ++i) {
                if (labelData[i].name < 50) {
                    labelData[i].itemStyle = {
                        normal: {
                            color: new _this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: color
                                    },
                                    {
                                        offset: 1,
                                        color: color
                                    }
                                ]
                            )
                        },

                    }
                }
            }
            for (var i = 0; i < 150; ++i) {
                labelData1.push({
                    value: 1,
                    name: i,
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,0)',
                        }
                    }
                });
            }
            for (var i = 0; i < labelData1.length; ++i) {
                if (labelData1[i].name < 150) {
                    labelData1[i].itemStyle = {
                        normal: {
                            color: new _this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: '#E6E6E6'
                                    },
                                    {
                                        offset: 1,
                                        color: '#E6E6E6'
                                    }
                                ]
                            )
                        },

                    }
                }
            }
            var option = { 
                title: [{
                    text: text[0],
                    x: '47%',
                    y: '30%',
                    textAlign: 'center',
                    textStyle: {
                        fontSize: '16',
                        fontWeight: '400',
                        color: color,
                        textAlign: 'center',
                    },
                }, {
                    text:  text[1],
                    left: '47%',
                    top: '52%',
                    textAlign: 'center',
                    textStyle: {
                        fontSize: '20',
                        fontWeight: '600',
                        color: color,
                        textAlign: 'center',
                    },
                },  ],
                polar: {
                    radius: ['64%', '66%'],
                    center: ['50%', '50%'],
                },
                angleAxis: {
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,

                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [{
                        name: '',
                        type: 'bar',
                        roundCap: true,
                        radius: ['80%', '90%'],
                        barWidth:1,
                        showBackground: true,
                        // backgroundStyle: {
                        //     color: '#00D6CE',
                        // },
                        data: [100],
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new _this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: color
                                }, {
                                    offset: 1,
                                    color: color
                                }]),
                            }
                        }
                    },
                    {
                        hoverAnimation: false,
                        type: 'pie',
                        z: 2,
                        data: labelData.map((item, index) => {
                            // 每隔一个扇区添加一个值为0的数据点
                            if (index % 2 === 0) {
                                return item;
                            } else {
                                // 添加一个值为0的扇区
                                return {
                                    value: 3,
                                    name: '',
                                    itemStyle: {
                                        normal: {
                                            color: 'rgba(0,0,0,0)'  // 透明色
                                        }
                                    }
                                };
                            }
                        }),
                        radius: ['80%', '90%'],
                        zlevel: -2,
                        itemStyle: {
                            normal: {
                                borderColor: '#180f2a',
                                borderWidth: 0,
                            }
                        },
                        label: {
                            normal: { 
                                show: false,
                            }
                        },
                    },
                    {
                        hoverAnimation: false,
                        type: 'pie',
                        z: 1,
                        // data: labelData1,
                        data: labelData1.map((item, index) => {
                            // 每隔一个扇区添加一个值为0的数据点
                            if (index % 2 === 0) {
                                return item;
                            } else {
                                // 添加一个值为0的扇区
                                return {
                                    value: 3,
                                    name: '',
                                    itemStyle: {
                                        normal: {
                                            color: 'rgba(0,0,0,0)'  // 透明色
                                        }
                                    }
                                };
                            }
                        }),
                        radius: ['80%', '90%'],
                        zlevel: -2,
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(0,0,0,0)',
                                borderWidth: 0,
                            }
                        },
                        label: {
                            normal: { 
                                show: false,
                            }
                        },
                    },

                ]
            };
            chart.setOption(option);
        },
        initBar(){
            let _this = this;
            var chartDom = document.getElementById("left-trqk");
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize(); 
            var option = { 
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: "rgba(0,0,0,0.3)",
                    borderWidth: "0",
                    textStyle: {
                        color: "#fff" //设置文字颜色
                    },
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            opacity: 0
                        }
                    },
                    formatter: function(prams) {  
                        return prams[0].axisValue + ":" + " " + prams[0].data + "%" 
                    }
                },
                grid: {
                    top: '15%',
                    right: '3%',
                    left: '13%',
                    bottom: '16%'
                },
                xAxis: [{
                    type: 'category',
                    color: '#59588D',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月 ', '11月', '12月 ' ],
                    axisPointer: {
                        type: 'line'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#272456'
                        }
                    },
                    axisLabel: { 
                        color: '#B4B6BB',
                        textStyle: {
                            fontSize: 10
                        },
                        show: true,
                        interval: 0,
                        rotate: 0,
                        formatter: function(value) { 
                            return value.replace(/(.{20})./g, '$1<br/>');
                        },
                        rich: { 
                            myLabel: { 
                                width: 50,
                                height: 20, 
                            }
                        }
                    },
                }],
                yAxis: [{ 
                    axisLabel: {
                        // formatter: '{value}%',
                        color: '#8E9299',
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#515762'
                        }
                    }
                }],
                series: [{
                    type: 'bar',  
                    data: [1.6, 2.2, 2.8,3.7, 3.9, 2.8,3.7, 3.2, 2.8,3.7,1.9,2.8],
                    barWidth: '14px',
                    itemStyle: {
                        normal: {
                            color: "#04BCBF" 
                        }
                    }, 
                }]
            };
            chart.setOption(option);
        }, 
    },
    // beforeDestroy() { 
    //     sessionStorage.clear();
    // }
  
}
</script>

<style lang="scss" scoped> 
@import "@/assets/styles/overView.scss";  
.right{
    z-index: 11;
}
.card_body{
    padding: 10px 24px;
}
.top_card{ 
    >img{
        width: 86px;
        height: 78px;
    }
    >div{
        margin-left: 16px;
        >p{
            color: #fff;
            
        }
    }
}

.data_text{
    >span{
        text-shadow: 0 0 4px #29E3FC92;
    }
    >span:nth-child(1){
        font-size: 32px;
    }
    >span:nth-child(2){
        font-size: 14px;
    }
}

.bottom_card{
    flex-wrap: wrap;
    >div{
        width: 50%;
        margin-top: 10px;
    }
    .top_card{
        >img{
            width: 50px;
            height: 50px; 
        }
        >div{
            >p:nth-child(2){
                >span:nth-child(1){
                    font-size: 22px;
                    margin-right: 10px;
                    font-family: "siyuanHeavy";
                }
                >span:nth-child(2){
                    color: #FFFFFF64;
                    font-size: 12px;
                }
            }
        }
    }
}

.left_card3{
    height: calc(100% - 560px); 
    >div{height: 100%;}
    .left_card3_menu{
        padding: 10px 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);  
        grid-template-rows: repeat(2, auto);  
        gap: 6px 10px; 
        >div{ 
            height: 32px;
            background-color: #2D4A6F80;
            border-radius: 64px;
            border: 1px solid #FFFFFF10; 
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            cursor: pointer;
            &:hover{
                background-color: #4181D1 !important;
            }
        }
        .active_bgColor{
            background-color: #4181D1 !important;
        }
        .f_color{ 
            background-image: linear-gradient(to bottom, #ffffff, 90%, #C8F2FE);  
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            color: transparent; 
        }
    } 
} 


.pie_chart_leftbox{ 
    height: calc(100% - 120px); 
}

.card3_r_body{
    height: calc(100% - 30px);
    #echarts_3{
        height: 60%;
        width: 100%;
    }
    .flex_a{
        display: flex;
        height: 40%;
        >div{
            width: 33%;
            height: 100%;
        }
    }
}
 
.echarts_box1{
    width: 100%;
    height: 180px;
    padding: 14px 0;
    box-sizing: border-box;
    
}
  
.echarts_box2{
    width: 100%;
    height: calc(100% - 586px);
    padding: 14px 0;
    box-sizing: border-box;
}

.right_box1{
    padding: 14px;
    >div:nth-child(1){
        height: 150px;
        width: 100%;
    }
    >div:nth-child(2){
        margin-top: 10px;
        height: 100px;
        width: 100%; 
        >div{
            height: 100%;
            width: 33%;
        }
    }
}

.right_box2{
    width: 100%;
    height: calc(100% - 594px);
}
#echarts_7{
    width: 100%;
    height: 154px;
}

.surveillance_box{
    flex-wrap: wrap; 
    height: calc(100% - 30px); 
    padding: 4px 14px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    >div{
        width: calc(33% - 10px);
        height: calc(50% - 10px);
        position: relative; 
        img{
            width: 100%;
            height: 100%;
        }
        p{
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            text-align: center;
            font-size: 14px;
            color: #fff;
            background-color: rgba($color: #000000, $alpha: 0.3);
        }
    }
}
</style>